<template>
<div>
  <!-- 这个是点击弹出的框 -->
  <el-button style="margin-bottom: 30px;" @click="openBannerForm">添加轮播图</el-button>
  <!-- 下面是的是表格 -->
  <!-- slice表示的是返回一个新数组 不改变原数组 不包含end元素  splice是会改变原数组的 。返回的是一个新的数组-->  
  <el-table :data="tableData.slice(index, index + pagesize)" border style="width: 100%">
    <el-table-column prop="img" label="图片" width="180">
      <template #default="scope">
        <!-- scope表示拿到这一行的数据    scope表示的是拿到这一行的数据 -->
        <el-image style="width: 100px; height: 100px" :src="scope.row.img" fit="contain" />
      </template>
    </el-table-column>
    <el-table-column prop="alt" label="文案" width="180" />
    <el-table-column prop="link" label="跳转地址" />
    <el-table-column label="上线">
      <template #default="scope">
        <!--
          el-switch 的回调（@change）只支持传一个参数，
          这里要把scope.row.bannerid也传进去
          可以采用箭头函数的写法
        -->
        <el-switch
          v-model="scope.row.flag"
          @change="(flag) => onStatusChange(scope.row.bannerid, flag)"
        />
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <div>
          <el-icon @click="removeBanner(scope.row.bannerid)" style="cursor: pointer;">
            <Delete />
          </el-icon>
        </div>
      </template>
    </el-table-column>
  </el-table>
  <!-- 这下面的是分页。  下面的是分页 -->
  <el-pagination
    class="pager"
    background
    layout="prev, pager, next"
    :total="tableData.length"
    :page-size="pagesize"
    @current-change="currentChange"
  />
<!-- 这个是弹出的框 -->
  <el-dialog
    v-model="dialogVisible"
    title="添加轮播图1111"
  >
  <!-- 然后把弹出框里边的数组传进来 -->
    <BannerForm @on-add-succuss="onAddSuccess"></BannerForm>
  </el-dialog>
</div>
</template>
<script>
import { ElMessage } from 'element-plus'
import { getBannerList, removeBanner, updateBannerStatus } from '../services/index'
// 导入传进来的组件  组件和路由组件的区别。组件不需要在里边注册，但是路由需要。路由可以通过this.$router.push来
// 进行跳转路由，而组件不行。比如说什么点击事件之类的，这样就很容易分辨了 发送ajax放在methods方法里边
import BannerForm from '../components/BannerForm.vue'
export default {
  data() {
    return {
      tableData: [],
      index: 0,
      // 每页展示两条数据
      pagesize: 2,
      dialogVisible: false
    }
  },
  components: {
    BannerForm
  },
  created() {
    // 初始化，拉取一遍数据
    this.fetchBannerList()
  },
  methods: {
    // 拉取banner数据
    // 以下地方会用到
    // 1. 初始化，created 里
    // 2. 删除后，刷新下数据
    // 3. 添加banner，刷新下数据
 async   fetchBannerList() {
   let result=await   getBannerList()
        // 这里result表示请求到的那个数组。然后data里边套着data。然后在是里边的data
    this.tableData = result.data.data
        // console.log(result);
        // 这样就取到了data里边的数据。就比较简单了
        // console.log(result.data.data);
    
    },
    currentChange(page) {
      // 每页 2 条数据
      // 1: 0, 1
      // 2: 2,  3
      // 3: 4,  5
      this.index = (page - 1) * this.pagesize
    },
 async   removeBanner(bannerid) { 
      // 1. 删除 banner
    await  removeBanner(bannerid)
        // 2. 刷新 tableData 数据（重新请求一遍）
        // 刷新数据，页面会自动更新
        this.fetchBannerList()
   ElMessage.success('删除成功')
        // 删除数据的话直接使用一个值接收就好了
    },
    openBannerForm() {
      this.dialogVisible = true
    },
    // 轮播图添加成功
    onAddSuccess() {
      // 关闭弹框
      this.dialogVisible = false
      // 刷新数据
      this.fetchBannerList()
    },

    // 修改轮播图的状态
  async  onStatusChange(bannerid, flag) {
     await updateBannerStatus({
        bannerid,
        flag
      })
    }
  }
}

</script>
<style scoped>
.pager {
  margin-top: 30px;
}
</style>
<!-- 分页显示数据的这里不太懂，晚上需要看下视频 -->